<template>
    <div class="submenu">
        <div v-for="item in list" :key="item.id">
            <el-submenu v-if="isNotEmpty(item.children)" :index="item.id">
                <template slot="title">
                    <i :class="item.icon"></i>
                    <span>{{item.title}}</span>
                </template>
                <div v-for="item in item.children" :key="item.id">
                    <el-submenu v-if="isNotEmpty(item.children)" :index="item.id">
                        <template slot="title">
                            <i :class="item.icon" style="padding-left:5px"></i>
                            <span>{{item.title}}</span>
                        </template>
                        <el-menu-item v-for="item in item.children" :key="item.id" :index="item.path" @click="goPage(item)">
                            {{item.title}}
                        </el-menu-item>
                    </el-submenu>
                    <el-menu-item v-else :index="item.path" @click="goPage(item)">
                        <template slot="title">
                            <i :class="item.icon"></i>
                            {{item.title}}
                        </template>
                    </el-menu-item>
                </div>
            </el-submenu>

            <el-menu-item v-else :index="item.path" @click="goPage(item)">
                <template slot="title">
                    <i :class="item.icon"></i>
                    <span>{{item.title}}</span>
                </template>
            </el-menu-item>
        </div>

    </div>
</template>

<script>
export default {
    name: "Submenu",
    props: {
        list: Array,
    },
    data() {
        return {
        }
    },
    methods: {
        // 开始跳转
        goPage(item) {
            let { path } = item
            this.$router.push(path)
        },
        // 判断路由是否为空
        isNotEmpty(children) {
            if(children){
                return true
            }
            return false
        }
    }
}
</script>

<style lang="scss">
</style>